<%@ include file="../common/IncludeTop.jsp"%>

<style>
	 .okTips{
		 color: #A8D8CD;
	 }

	 .errorTips{
		 color: #ff6060;
	 }
</style>

<script>
	/*
	// 最好是写到另外的文件里，把它引入进来
	var xhr;//异步对象

	function checkUsername(){
		var username = document.getElementById("username").value;
		xhr = new XMLHttpRequest();
		xhr.onreadystatechange = fun1;
		xhr.open("GET","usernameExist?username="+username,true);
		xhr.send(null);
	}

	function fun1(){
		if(xhr.readyState === 4){
			if(xhr.status === 200){//是status不是state！
				var tips = document.getElementById("usernameTips");
				var responseInfo = xhr.responseText;
				if(responseInfo === 'Exist'){
					console.log("exist");
					//tips.classList.add('errorTips');//一直往后加类
					tips.className = 'errorTips';
					tips.innerText = "Invalid";
				}else if(responseInfo === 'Not Exist'){
					console.log("not exist");//为什么一直会不重复用户名啊？数据库没搞好？
					//tips.classList.add('okTips');//一直往后加类
					tips.className = 'okTips'
					tips.innerText = "Available";
				}
			}
		}
	}
	*/

	$(function (){
		$('#username').on('blur', function (){
			$.ajax({
				type	: "GET",
				url		: "usernameExist?username="+this.value,
				success	: function (data){
					if(data.code === 1){
						//$('#usernameTips').className = 'errorTips';不行！！
						//jQuery支持链式语法
						$('#usernameTips').attr("class", "errorTips").text('Invalid');
					}else if(data.code === 0){
						$('#usernameTips').attr("class", "okTips").text('Available');
					}
				}
			});
		});
	});
</script>

${sessionScope.messageAccount}

<div id="Catalog">
	<form action="newAccount" method="post">

		<h3>User Information</h3>

		<table>
			<tr>
				<td>User ID:</td>
				<td><input id="username" type="text" name="username"/>
					<span id="usernameTips"></span>
				</td>
			</tr>
			<tr>
				<td>New password:</td>
				<td><input type="text" name="password" /></td>
			</tr>
			<tr>
				<td>Repeat password:</td>
				<td><input type="text" name="repeatedPassword" /></td>
			</tr>
    		<%--验证码--%>
			<tr>
				<td>VerificationCode:</td>
				<td>
					<input type="text" name="vCode" size="5" maxlength="4"/>
					<%--图片在哪？--%>
					<a href="newAccount"><img border="0" src="verificationCode" name="checkcode"></a>
				</td>
			</tr>
		</table>

		<%@ include file="IncludeAccountFields.jsp"%>

		<input type="submit" name="newAccount" value="Save Account Information"/>
	</form>
</div>

<%@ include file="../common/IncludeBottom.jsp"%>